<template>
  <!-- 步骤库管理 -->
  <div class="tree-right-detail-box tabsPage">
    <CardSearch ref="cardSearch" :config="cardSearchConfig" />
    <!-- <el-tabs v-model="xjType" type="card" @tab-click="refreshData">
      <el-tab-pane label="人工巡检" name="1"></el-tab-pane>
      <el-tab-pane label="自动巡检" name="2"></el-tab-pane>
    </el-tabs> -->
    <!-- <el-card style="border-radius: 0" class="tooltip-wrapper">
      <div class="cardSearchContainer">
        <el-form :inline="true">
          <el-form-item label="搜索">
            <el-input
              v-model="keyWord"
              style="width: 240px"
              placeholder="请输入关键字搜索"
              @input="search"
            />
          </el-form-item>
        </el-form>
        <div class="action-wrapper">
          <el-button type="primary" icon="iconfont icon-chaxun" @click="refreshData"
            >查询</el-button
          >
          <el-button
            v-if="$btnPerms('bs_step_add')"
            type="primary"
            icon="iconfont icon-tainjia"
            @click="addStepStore"
            >添加步骤库</el-button
          >
          <el-button
            v-if="$btnPerms('bs_step_del')"
            :disabled="!cardTableConfig.selectList.length"
            icon="iconfont icon-shanchu1"
            @click="handleDelete"
            >批量删除</el-button
          >
        </div>
      </div>
    </el-card> -->
    <CardTable :config="cardTableConfig" />
    <StepStoreDialog
      v-if="stepStoreDialog.visible"
      :config="stepStoreDialog"
      @refreshData="refreshData"
    />
  </div>
</template>

<script>
import CardTable from '@/components/cardTable/index.vue'
import CardSearch from '@/components/cardSearch/index.vue'
import StepStoreDialog from './components/stepStoreDialog.vue'
import { getStepList, delStep } from '@/api/patrol'
import useGlobal from '@/hooks/global/useGlobal'
const { $message, $btnPerms, $confirm, $format } = useGlobal()
export default {
  name: 'MaintainingInfo',
  components: { CardTable, StepStoreDialog, CardSearch },
  data() {
    return {
      keyWord: '',
      deviceTypes: ['其他', '管道', '物联网水表', 'PLC', '压力计'],
      cardSearchConfig: {
        operation: {
          search: { text: '查询', handle: () => this.refreshData() },
          add: { text: '添加标准', perm: true, handle: () => this.addStepStore() }
          // del: {
          //   text: '批量删除',
          //   handleDisabled: () => !this.cardTableConfig.selectList.length,
          //   perm: true,
          //   handle: () => this.handleDelete()
          // }
        },
        defaultParams: {},
        filters: [
          { label: '搜索', key: 'name', type: 'input', width: '360px' },
          {
            label: '设备类型',
            key: 'deviceType',
            type: 'select',
            width: '360px',
            multiple: true,
            options: [
              { label: '管道', value: '1' },
              { label: '物联网水表', value: '2' },
              { label: 'PLC', value: '3' },
              { label: '压力计', value: '4' },
              { label: '其他', value: '0' }
            ]
          }
        ]
      },
      cardTableConfig: {
        loading: false,
        dataList: [],
        // selectList: [],
        // tableSelectChangeHandle: val => (this.cardTableConfig.selectList = val),
        columns: [
          { prop: 'name', label: '标准名称', width: 260 },
          {
            prop: 'deviceType',
            label: '设备类型',
            width: 260,
            formatter: row => this.deviceTypes[row.deviceType]
          },
          { prop: 'remark', label: '要求' },
          { prop: 'creator', label: '创建人', width: 140, formatter: row => row.creator || '-' },
          {
            prop: 'createTime',
            label: '创建时间',
            width: 200,
            formatter: row => $format(row.createTime) || '-'
          }
        ],
        operations: [
          // {
          //   label: '复制',
          //   perm: $btnPerms('bs_step_copy'),
          //   perm: true,
          //   icon: 'iconfont icon-fuzhi',
          //   handle: row => this.copyStepStore(row)
          // },
          {
            label: '编辑',
            perm: true,
            icon: 'iconfont icon-bianji',
            handle: row => {
              this.stepStoreDialog.title = '编辑步骤库'
              this.stepStoreDialog.currentId = row.id
              this.stepStoreDialog.visible = true
            }
          },
          {
            perm: $btnPerms('bs_step_del'),
            perm: true,
            label: '删除',
            icon: 'iconfont icon-shanchu1',
            handle: row => this.handleDelete(row)
          }
        ],
        operationWidth: '230px',
        pagination: {
          page: 1,
          limit: 20,
          total: 0,
          layout: 'total, sizes, prev, pager, next, jumper',
          sizeHandle: val => {
            this.cardTableConfig.pagination.limit = val
            this.refreshData()
          },
          pageHandle: val => {
            this.cardTableConfig.pagination.page = val
            this.refreshData()
          }
        }
      },
      stepStoreDialog: {
        visible: false,
        title: '添加步骤库',
        close: () => {
          this.stepStoreDialog.visible = false
        },
        currentId: {}
      }
    }
  },
  created() {
    this.refreshData(true)
  },

  methods: {
    async refreshData() {
      this.cardTableConfig.loading = true
      this.cardTableConfig.dataList = []
      this.cardTableConfig.pagination.total = 0
      const paramsObj = {
        page: this.cardTableConfig.pagination.page,
        size: this.cardTableConfig.pagination.limit
      }
      if (this.$refs && this.$refs.cardSearch) {
        Object.assign(paramsObj, this.$refs.cardSearch.queryParams)
        paramsObj.deviceType = (paramsObj.deviceType || []).join(',')
      }
      try {
        const res = await getStepList(paramsObj)
        this.cardTableConfig.loading = false
        if (res.status === 200) {
          this.cardTableConfig.dataList = res.data.data
          this.cardTableConfig.pagination.total = res.data.total
        } else {
          $message.error('获取失败')
        }
      } catch (error) {
        this.cardTableConfig.loading = false
      }
    },
    getTreeData() {
      try {
      } catch (error) {
        $message('暂无项目 不可操作，请创建项目')
        this.totalLoading = false
      }
    },

    addStepStore() {
      this.stepStoreDialog.currentId = ''
      this.stepStoreDialog.title = '添加步骤库'
      this.stepStoreDialog.visible = true
    },

    // 复制
    // async copyStepStore(row) {
    //   try {
    //     const res = await copyStepStore(row.id)
    //     if (res.status === 200) {
    //       $message.success('复制成功')
    //     }
    //   } catch (err) {
    //     $message.error(err.message || err.data.message)
    //   }
    // },

    async edit() {
      const params = {
        type: this.editParams.type,
        name: this.editParams.name,
        timeRange: this.editParams.timeRange.join('-')
      }
      try {
        const res = await editYxscgl(params)
        if (res.status === 200) {
          $message.success('修改成功！')
          this.refreshData()
        } else {
          $message.error('修改失败！')
        }
      } catch (error) {
        $message.error('修改失败！')
      }
    },
    handleDelete(row) {
      $confirm('确定删除指定步骤吗?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 删除角色方法
        let ids = []
        if (row) {
          ids = [row.id]
        } else {
          ids = this.cardTableConfig.selectList.map(item => item.id)
        }
        delStep(ids).then(() => {
          $message({
            type: 'success',
            message: '操作成功'
          })
          this.refreshData()
        })
      })
    },
    $btnPerms(a, b) {
      $btnPerms(a, b)
    }
  }
}
</script>

<style lang="scss" scoped>
.cardSearch {
  margin: 16px 0;
  background: #fff;
}
.cardSearchContainer {
  display: flex;
  justify-content: space-between;
}
input {
  height: 48px;
}
.tableBox {
  margin-top: 20px;
}
</style>

<style lang="scss">
.tabsPage {
  padding-bottom: 20px !important;
  .el-tabs__header {
    margin: 0;
  }
  .el-tabs__content {
    display: none;
  }

  .tooltip {
    .el-input__inner {
      height: 48px;
    }
  }
}
</style>
